<template>
    <div class="vginfoIndexRoot">
        <xxl-hint ref="hint" :text="'加入购物车成功'"></xxl-hint>
        <xxl-status></xxl-status>
        <div class="ctx" :style="{ height: 'calc( 100% - ' + header.top + 'px)' }">
            <title :text="storeData.store.name">
                <div slot="left">
                    <div @click="back()">返回</div>
                </div>
            </title>
            <div class="main">
                <div class="info"></div>
                <div class="item" v-for="(item, k) in storeData.goodsList" :key="k">
                    <item @showHint="hint()" :d="item" :f="storeData.store"></item>
                </div>

            </div>
            <div class="foot">
                <div class="icon" @click="toShop()"><img class="img" src="../static/img/shopcat.png" alt=""><span
                        class="text">{{ shopMuch
                        }}</span></div>
                <div class="bottons">
                    <span>合计</span><span class="money">￥ {{ moneyFormat(shopMoney) }}</span>
                    <div class="botton" @click="toPay()"><xxl-botton p="15" h="40">结算</xxl-botton></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import item from './item.vue'
import { mapGetters } from 'vuex';
import api from '../api';
export default {
    name: 'Index',

    data() {
        return {
            storeData: {
                store: {
                    name: "商家"
                }
            }
        };
    },

    computed: {
        ...mapGetters(['shopMuch', 'shopMoney'])
    },
    mounted() {

    },
    onLoad(o) {
        api.getStoreIndexData(o.id).then((data) => {
            this.storeData = data.data
        })
    },
    methods: {
        back() {
            uni.navigateBack()
        },
        hint() {
            this.$refs.hint.open()
        },
        toShop() {
            this.$store.state.home = 1
            uni.navigateBack({
                delta: 100
            })
        },
        async toPay() {
            if (this.user.isLogin) {
                // if (this.shopMuch > 0) {
                let data = await api.addOrder(this.$store.getters.checkedShop)
                if (data.code == 200) {
                    uni.navigateTo({
                        "url": "/pack_payment/index?id=" + data.data
                    })
                }

                // }

            } else {
                uni.navigateTo({
                    "url": "/pack_log/login/login",
                })
            }
        }
    },
    components: {
        item
    }
};
</script>

<style lang="scss" scoped>
@import '@/uni.scss';

.vginfoIndexRoot {
    height: 100vh;
}

@font-face {
    font-family: "shopping_cart";
    /* Project id 4017985 */
    src: url('iconfont.ttf?t=1681555568500') format('truetype');
}

.shopping_cart {
    font-family: "shopping_cart" !important;
    font-size: 25px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.main {
    height: calc(100% - $uni-nav - 60px);
    background: $uni-bg-color-g;

    .item {
        box-sizing: border-box;
        padding: 10px;
    }
}

.foot {
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .icon {
        width: 25px;
        height: 25px;
        margin-left: 15px;
        position: relative;
    }

    .text {
        position: absolute;
        top: -12px;
        right: -20px;
        box-sizing: border-box;
        position: absolute;
        height: 20px;
        min-width: 20px;
        font-size: 10px;
        line-height: 10px;
        padding: 5px;
        background: rgb(247, 76, 49);
        border-radius: 10px;
        text-align: center;
        color: aliceblue;
    }

    .total {}

    .money {
        font-weight: bold;
        color: orangered;
    }

    .img {
        height: 100%;
        width: 100%;
    }

    .bottons {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-right: 15px;
    }

    .botton {
        margin-left: 10px;
    }
}
</style>